<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/assets/bootstrap-5.3.8-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/assets/css/index.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
   
</head>
<body>
    <div class="card">
        <div class="card-body">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item"><a href="#">首页</a></li>
                  <li class="breadcrumb-item active" aria-current="page">图书管理</li>
                </ol>
              </nav>
              <hr>
              <div class="operate">
                <div class="search">
                    <span>图书搜索：</span>
                    <input type="text" class="form-control" placeholder="请输入要搜索的图书的ID">
                </div>
                <div class="operation">
                    <button type="button" class="btn btn-success"><i class="bi bi-search"></i></button>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">添加</button>
                </div>
              </div>
              <!-- 表格 -->
              <table class="table">
                <!-- 表头-展示标题 -->
                <thead>
                  <tr>
                    <th scope="col">编号</th>
                    <th scope="col">书名</th>
                    <th scope="col">作者</th>
                    <th scope="col">出版社</th>
                    <th scope="col">操作</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
              <!-- 添加图书模态框 -->
              <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h1 class="modal-title fs-5" id="exampleModalLabel">添加图书</h1>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      <form>
                        <div class="bookname">
                          <label for="">书&nbsp;&nbsp;&nbsp;名：</label>
                          <input type="text" class="form-control newBookName" placeholder="请输入书名">
                        </div>
                        <div class="author">
                          <label for="">作&nbsp;&nbsp;&nbsp;者：</label>
                          <input type="text" class="form-control newBookAuthor" placeholder="请输入作者">
                        </div>
                        <div class="publisher">
                          <label for="">出版社：</label>
                          <input type="text" class="form-control newBookPublisher" placeholder="请输入出版社">
                        </div>
                      </form>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                      <button type="button" class="btn btn-primary addBook" data-bs-toggle="modal" data-bs-target="#exampleModal">确定</button>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 修改图书的模态框 -->
              <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h1 class="modal-title fs-5" id="exampleModalLabel">修改图书</h1>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      <form>
                        <div class="bookname">
                          <label for="">书&nbsp;&nbsp;&nbsp;名：</label>
                          <input type="text" class="form-control updateBookName" placeholder="请输入书名">
                        </div>
                        <div class="author">
                          <label for="">作&nbsp;&nbsp;&nbsp;者：</label>
                          <input type="text" class="form-control updateBookAuthor" placeholder="请输入作者">
                        </div>
                        <div class="publisher">
                          <label for="">出版社：</label>
                          <input type="text" class="form-control updateBookPublisher" placeholder="请输入出版社">
                        </div>
                      </form>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                      <button type="button" class="btn btn-primary updateBook" data-bs-toggle="modal" data-bs-target="#exampleModal2">确定</button>
                    </div>
                  </div>
                </div>
              </div>
        </div>
      </div>
      <script src="./assets/js/jquery-3.7.1.min.js"></script>
      <script src="./assets/bootstrap-5.3.8-dist/js/bootstrap.min.js"></script>
      <script>
        function getBookList(){
          // 清除之前的数据
          $('tbody tr').remove();
          $.ajax({
                type: 'GET',
                url: `http://ajax-api.itheima.net/api/books`,
                success:data  => {
                    
                    // 将服务器返回数据循环遍历放入页面
                    // 抽出需要数据
                    let bookList=data.data
                  
                    // 此处item为一条数据
                    bookList.forEach(item => {
                     
                      // 遍历一条数据就创建一行放在body
                      let tr =$(`<tr>
                        <td>${item.id}</td>
                        <td>${item.bookname}</td>
                        <td>${item.author}</td>
                        <td>${item.publisher}</td>
                        <td>
                          <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal2" onclick="editBook(${item.id})">修改</button>
                          <button type="button" class="btn btn-danger" onclick="deleteBook(${item.id})">删除</button>
                        </td>
                        </tr>`)
                        $('tbody').append(tr)
                    })
                }
            })
        }
        // 删除
        function deleteBook(id){
          $.ajax({
            type:'DELETE',
            url:`http://ajax-api.itheima.net/api/books/${id}`,
            success:() => {
              alert('删除成功')
              // 删除后，马上获取图书列表
              getBookList()
            }
          })
        }
        // 查询
        $('.searchBook').click(function(){
          // 根据用户是否输入id来决定查询什么数据
          let id = $('input').val()
          if(!id){
            getBookList()
          }else{
            $.ajax({
              type:'GET',
              url:`http://ajax-api.itheima.net/api/books/${id}`,
              success:(data)=>{
                console.log(data);
                let bookList = data.data
                console.log(bookInfo);
                // 提示用户查询成功
                alert(data.message)
                // 移除表格中已有数据
                $('tbody tr').remove()
                // 渲染返回的数据
                let tr = $(`<tr>
                  <td>${bookInfo.id}</td>
                  <td>${bookInfo.bookname}</td>
                  <td>${bookInfo.author}</td>
                  <td>${bookInfo.publisher}</td>
                  <td>
                    <button type="button" class="btn btn-primary">修改</button>
                    <button type="button" class="btn btn-danger" onclick="deleteBook(${bookInfo.id})">删除</button>
                  </td>
                  </tr>`)
                  $('tbody').append(tr)
                // 将id置空
                    id.val('')
              }
            })
          }
        })
        /*
        添加图书
        1.业务交互
        用户点击添加按钮
        弹出模态框
        当用户点击模态框右下角的确认时：
        如果用户没有输入内容，此时弹出警告框，提示用户图书数据不能为空
        如果用户图书信息没有输入完成，弹出警告框，提示用户图书数据不能为空后
        当用户将图书信息输入完整时，发起请求，将图书数据提交到服务区并提示用户
        */
        $('.addBook').click(function(){
          let bookname = $('.newBookName')
          let author = $('.newBookAuthor')
          let publisher = $('.newBookPublisher')
          if(!(bookname.val() && author.val() &&publisher.val())){
              alert('图书信息不能为空!')
          }else{
            $.ajax({
              // 图书内容不为空，发起请求
              type:'POST',
              url:'http://ajax-api.itheima.net/api/books',
              data:{
                bookname:bookname.val(),
                author:author.val(),
                publisher:publisher.val()
              },
              success:() =>{
                // 清空input框中的内容
                bookname.val('')
                author.val('')
                publisher.val('')
                alert('图书添加成功')
                // 获取最新的图书列表
                getBookList()
              }
            })
          }
        })
        /*
        修改图书
        1.业务交互
        点击修改按钮时，弹出模态框
        模态框中回显的是当前点击图书的信息
        点击确认时：
        如果图书的信息不完整，提示用户图书信息不能为空
        如果图书信息完整，发起请求
        关闭模态框
        获取最新数据
        2.请求流程
        */
       function editBook(id){
       
        // 根据id获取图书详情
        // 针对get请求可以直接使用$.get（请求路径，请求成功回调）
        $.get(`http://ajax-api.itheima.net/api/books/${id}`,data =>{
          // console.log(bookInfo);
          // 将图书信息从返回的数据中抽出来
          let bookInfo = data.data
       
          // 将图书信息返回页面
          $('.updateBookName').val(bookInfo.bookname)
          $('.updateBookAuthor').val(bookInfo.author)
          $('.updateBookPublisher').val(bookInfo.publisher)
          // 确定修改，发起请求
          // 判断图书信息的完整性（非空）
          $('.updateBook').click(function(){
           
            // 获取内容
            let bookname = $('.updateBookName').val()
            let author = $('.updateBookAuthor').val()
            let publisher = $('.updateBookPublisher').val()
            // 判断是否为空
            if((!bookname && author && publisher)){
              alert('图书信息不能为空')
            }else{
              // 发起ajax请求
              $.ajax({
                type:'PUT',
                url:`http://ajax-api.itheima.net/api/books/${id}`,
                data:{
                  bookname,
                  author,
                  publisher
                },
                success:()=>{
                  alert('修改成功')
                  // 获取最新数据
                  getBookList()
                }
              })
            }
          })
        })
       }
        getBookList()
      </script>
    
</body>
</html>